<template>
	<view class="container">
		<view class="data-list">
			<z-paging ref="paging" v-model="deviceList" @query="getListFun">
				<view class="search" slot="top">
					<u-search placeholder="请输入设备编号" v-model="queryParams.code" searchIcon='scan' @clickIcon="scanFun" @search="getListFun" @custom='getListFun' @clear="getListFun"></u-search>
				</view>
				<view class="item" v-for="(item,index) in deviceList">
					<view class="item-title">{{item.name}}</view>
					<view class="item-body">
						<view>设备编号：{{item.code}}</view>
						<view>设备分类：{{item.categoryName}}</view>
						<view>使用部门：{{item.deptName}}</view>
					</view>
					<view class="item-bottom">
						<view class="item-user">
							<view class="item-avatar">{{item.userName ? item.userName.substring(0, 1) : '无'}}</view>
							<view class="item-name">{{item.userName ? item.userName : '未领用'}}</view>
						</view>
						<view class="item-status"><dict-tag :type="DICT_TYPE.DEVICE_STATUS" :value="item.status" /></view>
					</view>
					<u-line margin="30rpx 0rpx 0rpx 0rpx"/>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
	import { getDevicePage } from '@/api/device/device.js';
	import dictTag from '@/components/dict-tag/dict-tag.vue'
	
	export default {
		components: {
			dictTag
		},
		data() {
			return {
				/* 列表数据 */
				deviceList: [],
				/* 查询参数 */
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					code: undefined,
				}
			};
		},
		methods: {
			/* 查询设备台账列表 */
			getListFun() {
				getDevicePage(this.queryParams).then(response => {
					this.$refs.paging.complete(response.data.list);
				}).catch(response => {
					this.$refs.paging.complete(false);
				})
			},
			/* 扫码 */
			scanFun() {
				uni.scanCode({
					success: (res) => {
						this.queryParams.code = res.result;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.container {
	.data-list {
		.search {
			padding: 20rpx 30rpx 20rpx 30rpx;
			background-color: $uni-bg-color;
		}
		.item {
			background-color: $uni-bg-color;
			padding: 30rpx 30rpx 0rpx 30rpx;
			.item-title {
				font-size: $uni-font-size-base;
				font-weight: bold;
				margin-bottom: 15rpx;
			}
			.item-body {
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
			}
			.item-bottom {
				display: flex;
				justify-content: space-between;
				height: 60rpx;
				line-height: 60rpx;
				.item-user {
					display: flex;
					margin-top: 10rpx;
					.item-avatar {
						width: 60rpx;
						height: 60rpx;
						background-color: $uni-color-primary;
						border-radius: 50%;
						color: $uni-text-color-inverse;
						font-size: 30rpx;
						font-weight: bold;
						line-height: 60rpx;
						text-align: center;
					}
					.item-name {
						font-size: $uni-font-size-base;
						margin-left: 10rpx;
						line-height: 60rpx;
					}
				}
				.item-status {
					height: 60rpx;
					line-height: 60rpx;
				}
			}
		}
	}
	
}
</style>
